<template>

  <div class="flex overflow-y-auto overflow-x-hidden h-screen">
    <div class="flex flex-col w-96">
      <div class="form-control">
        <label class="label">
          <span class="label-text text-sm font-semibold">下拉列表</span>
        </label>
        <select class="select select-bordered input-md w-full max-w-xs" v-model="form.type">
          <option :value="undefined">未选择</option>
          <option v-for="item in types" :value="item.id">{{ item.name }}</option>
        </select>
      </div>
      <div class="form-control">
        <label class="label">
          <span class="label-text text-sm font-semibold">文本输入框</span>
        </label>
        <input type="text" v-model="form.text" placeholder="请输入文本"
               class="input input-md input-bordered"/>
      </div>
      <div class="form-control">
        <label class="label">
          <span class="label-text text-sm font-semibold">富文本（支持AI）</span>
        </label>
        <rich-text v-model="form.richText" />
      </div>
      <div class="form-control">
        <label class="label">
          <span class="label-text text-sm font-semibold">数字输入框</span>
        </label>
        <number-count :min="1" :max="9999999" v-model="form.num" />
      </div>
      <div class="form-control">
        <label class="label">
          <span class="label-text">多行文本</span>
        </label>
        <textarea class="textarea textarea-bordered h-24 w-9/12 mt-2" v-model="form.textarea"
                  placeholder="请输入内容"></textarea>
        <div class="label w-9/12">
          <span class="label-text-alt"></span>
          <span class="label-text-alt">{{ form.textarea === undefined ? 0 :form.textarea.length }}字</span>
        </div>
      </div>
      <div class="form-control">
        <label class="label">
          <span class="label-text">上传图片</span>
        </label>
        <img-upload v-model="form.img" />
      </div>
      <div class="form-control">
        <label class="label">
          <span class="label-text">上传文件</span>
        </label>
        <file-upload v-model="form.uploadFile" />
      </div>
      <div class="form-control">
        <label class="label">
          <span class="label-text">日期范围选择器</span>
        </label>
        <date-range-picker v-model="form.dates" />
      </div>
      <div class="form-control">
        <label class="label">
          <span class="label-text">日期选择器</span>
        </label>
        <date-picker v-model="form.date" />
      </div>
      <div class="flex w-full min-h-36"></div>
      <div class="flex">
        <button class="btn btn-neutral btn-sm"
                @click="doSubmit()">提交
        </button>
      </div>
      <div class="w-full min-h-96"></div>
    </div>
  </div>

</template>

<script setup>

function doSubmit(){
  console.log(form.value)
}

const form = ref({})
const types = ref([{
  id: 1,
  name: "哈哈",
}, {
  id: 2,
  name: "嘎嘎",
}])

</script>

<style scoped>

</style>